/**
  * Helpers
  */

// Displays
.block { display: block }
.inline-block { display: inline-block }

.hidden-md {
  display: none;
  @include media-query($medium-screen) {
    display: inline-block;
  }
}

.radius-box {
  border-radius: 10px;
}

.radius-ls {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.radius-rs {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.radius-l1 {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}
.radius-r1 {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

// Margin helpers
.m0            { margin: 0 }
.mt0           { margin-top: 0 }
.mr0           { margin-right: 0 }
.mb0           { margin-bottom: 0 }
.ml0           { margin-left: 0 }

.ms            { margin: .25em }
.mts           { margin-top: .25em }
.mbs           { margin-bottom: .25em }
.mrs           { margin-right: .25em }
.mls           { margin-left: .25em }

.mm            { margin: .5em }
.mtm           { margin-top: .5em }
.mbm           { margin-bottom: .5em }
.mrm           { margin-right: .5em }
.mlm           { margin-left: .5em }

.m1            { margin: $base-space-unit }
.mt1           { margin-top: $base-space-unit }
.mb1           { margin-bottom: $base-space-unit }
.mr1           { margin-right: $base-space-unit }
.ml1           { margin-left: $base-space-unit }

.m2            { margin: $base-space-unit*2 }
.mt2           { margin-top: $base-space-unit*2 }
.mb2           { margin-bottom: $base-space-unit*2 }
.mr2           { margin-right: $base-space-unit*2 }
.ml2           { margin-left: $base-space-unit*2 }

// Padding helpers
.p0            { padding: 0 }
.pt0           { padding-top: 0 }
.pr0           { padding-right: 0 }
.pb0           { padding-bottom: 0 }
.pl0           { padding-left: 0 }

.ps            { padding: .25em }
.pts           { padding-top: .25em }
.pbs           { padding-bottom: .25em }
.prs           { padding-right: .25em }
.pls           { padding-left: .25em }

.pm            { padding: .5em }
.ptm           { padding-top: .5em }
.pbm           { padding-bottom: .5em }
.prm           { padding-right: .5em }
.plm           { padding-left: .5em }

.p1            { padding: 1em }
.pt1           { padding-top: 1em }
.pr1           { padding-right: 1em }
.pb1           { padding-bottom: 1em }
.pl1           { padding-left: 1em }

.p2            { padding: 1em*2 }
.pt2           { padding-top: 1em*2 }
.pr2           { padding-right: 1em*2 }
.pb2           { padding-bottom: 1em*2 }
.pl2           { padding-left: 1em*2 }

.pb5           { padding-bottom: 1em*5 }

// Padding small
.pads           { padding: .25em }

// Padding medium
.padm           { padding: .5em }

// Padding large
.padl           { padding: 1em }

// Padding small left :: right
.padsx {
 padding-left: .25em;
 padding-right: .25em;
}

// Padding medium left :: right
.padmx {
 padding-left: .5em;
 padding-right: .5em;
}

// Padding large left :: right
.padlx {
 padding-left: 1em;
 padding-right: 1em;
}

// Padding small top :: bottom
.padsy {
 padding-top: .25em;
 padding-bottom: .25em;
}

// Padding medium top :: bottom
.padmy {
 padding-top: .5em;
 padding-bottom: .5em;
}

// Padding large top :: bottom
.padly {
 padding-top: 1em;
 padding-bottom: 1em;
}

// Colors helpers
.primary-text-color {
  color: $primary;
}

.primary-bg-color {
  background-color: $primary;
}

.secondary-text-color {
  color: $secondary;
}

.secondary-bg-color {
  background-color: $secondary;
}

.success-text-color {
  color: $success;
}

.success-bg-color {
  background-color: $success;
}

.danger-text-color {
  color: $danger;
}

.danger-bg-color {
  background-color: $danger;
}

.info-text-color {
  color: $info;
}

.info-bg-color {
  background-color: $info;
}

.warning-text-color {
  color: $warning;
}

.warning-bg-color {
  background-color: $warning;
}
